<template>
	<view class="s-c-t-f">
		<view class="s-c-t-box">
			<view>{{saleTopTxt}}</view>
			<view class="top-txt">{{saleTop6Txt}}{{list.length}}</view>
		</view>
		<view class="list-box">
			<view class="list" v-for="(item,index) in list" :key="index" @click="clickItem(item)">
				<view class="l-n-d-a">{{index + 1}}</view>
				<view class="l-n-d-a">{{item.ts}}</view>
				<view class="l-n-d-a l-n-d-a-w">{{item.amount}}<text class="icon-font arrow-xiala-font" >&#xe600;</text></view>
			</view>
		</view>
	</view>
</template>

<script>
	import lang from "../../../js/conf/Lang.js";
	export default
	{
		data(){
			return{
				saleTop6Txt : lang.report.saleTop6Txt,
				saleTopTxt : lang.report.saleTopTxt,
				list:[],
				group:1,
			}
		},
		methods:{
			initData(group,data)
			{
				this.group = group;
				if(group == 2)//本月
				{
					let len = data.length;
					for(let i = 0; i < len; i++)
					{
						let temp = data[i];
						temp.ts = lang.getYM(temp.timestr);
						data[i] = temp;
					}
				}
				else if(group == 3)//季度
				{
					let len = data.length;
					for(let i = 0; i < len; i++)
					{
						let temp = data[i];
						let tArr = String(temp.timestr).split("-")
						temp.ts = lang.getSeasons(tArr[1]);
						data[i] = temp;
					}
				}
				else
				{
					let len = data.length;
				
					for(let i = 0; i < len; i++)
					{
						let temp = data[i];
						temp.ts = temp.timestr;
						data[i] = temp;
					}
				}
				this.list = data;
			},
			clickItem(item)
			{
				this.$emit("saleBunsinessIncome",item,this.group);
			},
		}
	}
</script>

<style lang="scss">
	.s-c-t-f
	{
		width: 405px;
		min-width: 405px;
		height: 100%;
		padding: 10px 0;
		border-right: 1px solid #EDEDED;
		.s-c-t-box
		{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0px 10px;
			padding-bottom: 10px;
			.top-txt
			{
				color: #999;
			}
		}
		.list-box
		{
			width: 100%;
			
			.list
			{
				display: flex;
				align-items: center;
				justify-content: space-between;
				cursor: pointer;
				padding: 10px 10px;
				.l-n-d-a
				{
					text-align: left;
					width: 33%;
					.arrow-xiala-font
					{
						padding-left: 10px;
					}
				}
				.l-n-d-a-w
				{
					width: 34%;
					text-align: right;
				}
			}
			
			.list:hover
			{
				color: #3388ff;
				background-color: #EDEDED;
			}
		}
	}
</style>
